<template>
  <!-- 个人信息页面 -->
  <div>
    <!-- 头像 -->
     <div class="userface">
      <div class="photo">
        <div class="box">
          <img :src="currentUser.userFace" alt />
        </div>
       </div>
      <div style="padding-top:50px;text-align:right">
        <el-button size="small" type="text" @click="toEditphoto()">修改头像</el-button>
      </div>
     </div>
     <!-- 当前id的数据 -->
    <div class="info">
      <el-form label-width="100" size="small">
        <el-form-item label="登录用户">{{ currentUser.username }}</el-form-item>
        <el-form-item label="用户姓名">{{ currentUser.realname }}</el-form-item>
        <el-form-item label="用户手机">{{ currentUser.telephone }}</el-form-item>
         <el-form-item label="用户性别">
          {{currentUser.gender=='male'?'男':'女'}}
          <i v-if="currentUser.gender==='male'" class="el-icon-male green_info"></i>
          <i v-else class="el-icon-female red_info"></i>
        </el-form-item>
         <!-- <el-form-item label="用户角色">{{currentUser.roles(roles => roles.name).toString()}}</el-form-item> -->
        <el-form-item label="用户角色">{{ currentUser.role===0?'管理员':'普通用户' }}</el-form-item>
        <!-- <el-form-item label="用户生日">{{ currentUser.birth?currentUser.birth.split(' ')[0]:'暂无'}}</el-form-item> -->
         <el-form-item label="用户生日">{{ currentUser.birth?moment(currentUser.birth).format("YYYY-MM-DD "): '暂无' }}</el-form-item>
        <el-form-item
          label="注册时间"
        >{{ currentUser.registerTime?moment(currentUser.registerTime).format("YYYY-MM-DD "): '暂无' }}</el-form-item>
        <el-form-item label="邮箱">{{ currentUser.email || '暂无' }}</el-form-item>
        <el-form-item label="用户状态">
          <el-tag
            size="small"
            :type="currentUser.status==='正常'?'success':'danger'"
          >{{ currentUser.status }}</el-tag>
        </el-form-item>
      </el-form>
      <div style="text-align:right;padding-right:200px;border-top:1px solid #f4f4f4">
       <el-button size="small" type="text" @click="toEdit()">修改个人信息</el-button>
      </div> 
    </div>
    <!-- 更改头像模态框 -->
    <el-dialog ref="photo_form" :rules="rulesphoto" title="更改头像"  :visible.sync="visiblephoto" width="50%"  class="customer_modal"  @close="clearValidate" >
      <div>
        <el-form ref="photo_form"  size="small" :model="formphoto"  :rules="rulesphoto" label-width="80px" >
          <el-form-item label="头像" label-width="100px">
            <el-upload
              class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="formphoto.userface" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visiblephoto = false">取 消</el-button>
        <el-button type="primary" size="small" @click="toSavephoto()">确 定 修 改</el-button>
      </span>
    </el-dialog>
    <!-- /更改头像模态框 -->

     <!-- 个人信息模态框 -->
    <el-dialog title="提示" :visible.sync="visible" width="50%" class="customer_modal" @close="clearValidate2" >
      <el-form ref="personal_form" size="small" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录用户" prop="username">
          <el-input disabled :placeholder="form.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="form.realname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone">
          <el-input v-model="form.telephone" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
            v-model="form.birth"
            value-format=""
            type="date"
            placeholder="选择出生日期"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="toSaveEdit()">确 定 修 改</el-button>
      </span>
    </el-dialog>
    <!-- /个人信息模态框 -->
  </div>
</template>

<script>

import {findUserDetailsById, getInfo, alterUserface, saveOrUpdate} from "@/api/user"
import {getToken} from "@/utils/auth"
import moment from "moment"
import { showFileURL, uploadFileURL } from "@/utils/config";


export default {
  data() {
    return {
     
      showFileURL, uploadFileURL,
      //当前id的数据
      currentUser:{
         roles:"",
      },

      id:undefined,
      // 头像模态框数据
       formphoto: {},
     //头像模态框的显示与隐藏
      visiblephoto: false,
      imageUrl: "",
      rulesphoto: {
        userFace: [
          { required: true, message: "请输入头像地址", trigger: "blur" },
        ],
      },
      form:{},
      visible:false,
       rules: {
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    
      
    };
  },
  computed: {},
  methods: {
    moment,
    //获取数据
    async queryCurrentUserData(){
      const res =  await findUserDetailsById({id:this.id})
      this.currentUser = res.data
    },
     /* 点击修改头像按钮，模态框显示 */
    toEditphoto(){
       this.formphoto = {
        id: this.currentUser.id,
        userface: this.currentUser.userFace,
      };
      this.visiblephoto = true;
    },
    // 图片上传成功的回调函数
    handleAvatarSuccess(res, file) {
      // console.log(res, "==图片上传成功之后的res");
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl);
      this.formphoto.userface = showFileURL + res.data.id;
    },
    // 图片上传之前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    /* 保存修改头像 */
    toSavephoto() {
      // 获取dom的值，对值进行校验 
      this.$refs.photo_form.validate(async (valid) => {
        if (valid) {
          // 校验通过，做自己的业务，保存
          let res = await alterUserface(this.formphoto);
          // 提示用户保存成功，刷新数据，关闭模态框
          this.$notify.success({
            title: "成功",
            message: res.message,
          });
          // this.alterUserface()
          this.visiblephoto = false;
        } else {
          // 校验不通过
          return false;
        }
      });
    },
     clearValidate() {
      this.$refs.photo_form.clearValidate();
    },
     clearValidate2() {
      this.$refs.personal_form.clearValidate();
    },
     /* 修改当前id的信息 */
    toEdit(){
      this.form = { ...this.currentUser };
      this.visible = true;
    },
    /* 保存修改的信息 */
    toSaveEdit() {
      // 获取dom的值，对值进行校验
      this.$refs.personal_form.validate(async (valid) => {
        if (valid) {
          // 校验通过，做自己的业务，保存
          let res = await saveOrUpdate(this.form);
          // console.log(res, "-----");
          // 提示用户保存成功，刷新数据，关闭模态框
          this.$notify.success({
            title: "成功",
            message: res.message,
          });
          this.queryCurrentUserData()
          this.visible = false;
        } else {
          // 校验不通过
          return false;
        }
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.queryCurrentUserData()
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
  .userface {
  display: flex;
  padding: 1em 200px;
  & > div {
    flex: 1;
  }
  .photo {
    .box {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  border-bottom: 2px solid #f4f4f4;
  margin-bottom: 1em;
}
</style>